<template>
    <div style="background-color: #66ccff;">
        状态管理
        <h1>这我儿子</h1>
        <SomBoy @boy="boyHandle"/>
        <h1>这我女儿</h1>
        <SomGirl @girl="girlHandle"/>
        <p>我儿子的成绩是{{ gradeBoy }}   我女儿的成绩是{{ gradeGirl }}</p>
        <p>看看小金库，只有{{ store.money }}</p>
        <p>给成绩好的100个比兜<button @click.once="send(100)">开扇</button></p>
        <p>儿子被扇了{{moneyBoy}}次，女儿被扇了{{moneyGirl}}次</p>
    </div>
</template>
<script>
import  SomBoy  from '../components/SomBoy'
import  SomGirl  from '../components/SomGirl'
import  {useMyStore} from '../store/myStore.js'
export default {
    components:{
        SomBoy,
        SomGirl,    
    },
    methods: {
        boyHandle(val){
            this.gradeBoy=val
        },
        girlHandle(val){
            this.gradeGirl=val
        },
        send(val){
            // this.store.decrement(val)
            if(this.gradeBoy > this.gradeGirl && this.gradeBoy>=60){
                this.moneyBoy+=val
                this.store.decrement(val)
            }else if(this.gradeBoy < this.gradeGirl && this.gradeGirl>=60){
                this.moneyGirl+=val
                this.store.decrement(val)
            }else if(this.gradeBoy == this.gradeGirl && this.gradeBoy>=60){
                this.moneyBoy+=val/2
                this.moneyGirl+=val/2
                this.store.decrement(val)
            }else{
                alert("不给！！！")
            }
        }
    },
    data() {
        return {
            gradeBoy:'',
            gradeGirl:'',
            store:useMyStore(),
            moneyBoy:0,
            moneyGirl:0,
        }
    },
}
</script>